<template>
  <div class="page-wrap">
    <div class="top-wrap">
      <el-button @click="goAdd()" type="primary" icon="el-icon-plus">增加</el-button>
      <el-button @click="godel()" type="danger" icon="el-icon-delete">删除</el-button>
    </div>
    <div class="spin-status">
      <el-table :data="dataList" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <!-- <el-table-column prop="zb" label="早班">
          <template slot-scope="scope"> {{ scope.row.zbks }} ~ {{ scope.row.zbjs }} </template>
</el-table-column> -->

        <el-table-column prop="pbrq" label="排班日期" />
        <el-table-column prop="bz" label="班组" />
        <el-table-column prop="bc" label="班次" />
        <el-table-column prop="kssj" label="开始时间" />
        <el-table-column prop="jssj" label="结束时间" />

        <el-table-column prop="bzxx" label="备注"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="goEdit(scope.row)" type="text">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="diatitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="diaform">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <el-form-item label="排班日期" prop="pbrq">
            <el-date-picker v-model="form.pbrq" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="班组" prop="bz">
            <el-select v-model="form.bz" placeholder="请选择班组">
              <el-option v-for="(x, index) in bzlist" :key="index" :label="x.mc" :value="x.mc"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班次" prop="bc">
            <el-select v-model="form.bc" placeholder="请选择班次">
              <el-option v-for="(x, index) in bclist" :key="index" :label="x.bzxx" :value="x.bzxx"
                >{{ x.bcfs == 2 ? '两班倒' : '三班倒' }}，{{ x.bzxx }}</el-option
              >
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="开始时间" prop="kssj">
            <el-input v-model="form.kssj" readonly></el-input>
          </el-form-item>
          <el-form-item label="结束时间" prop="jssj">
            <el-input v-model="form.jssj" readonly></el-input>
          </el-form-item> -->
          <el-form-item label="备注" prop="bzxx">
            <el-input v-model="form.bzxx"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import dayjs from 'dayjs'

export default {
  name: 'Pbinfo',
  components: {},
  filters: {},
  data() {
    return {
      pageSize: 1000,
      pageNum: 1,
      dataList: [],
      diatitle: '创建',
      dialogVisible: false,
      form: {
        pbrq: '',
        bz: '',
        bc: '',
        bzxx: '',
      },
      rules: {
        pbrq: { required: true, message: '请输入', trigger: 'change' },
        bz: { required: true, message: '请输入', trigger: 'change' },
        bc: { required: true, message: '请输入', trigger: 'change' },
      },
      multipleSelection: [],
      bclist: [],
      bzlist: [],
    }
  },
  computed: {},
  created() {
    this.getData()
    this.getData2()
    this.getData3()
  },
  mounted() {
    window.dj = dayjs
    // console.log(dayjs)
  },
  methods: {
    async getData() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      let sql = 'select * from t_jbxx_pbxx order by nbid DESC'
      try {
        const res = await request({
          url: '/db/getData',
          method: 'post',
          data: { sql, pagenum: this.pageNum, pagesize: this.pageSize },
        })
        if (res.obj.list.length == 0) {
          loading.close()
          return
        }
        this.dataList = res.obj.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    async getData2() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      let sql = 'select * from t_jbxx_bzxx order by nbid DESC'
      try {
        const res = await request({
          url: '/db/getData',
          method: 'post',
          data: { sql, pagenum: this.pageNum, pagesize: this.pageSize },
        })
        if (res.obj.list.length == 0) {
          loading.close()
          return
        }
        this.bzlist = res.obj.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    async getData3() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      let sql = 'select * from t_jbxx_bcxx order by nbid DESC'
      try {
        const res = await request({
          url: '/db/getData',
          method: 'post',
          data: { sql, pagenum: this.pageNum, pagesize: this.pageSize },
        })
        if (res.obj.list.length == 0) {
          loading.close()
          return
        }
        this.bclist = res.obj.list
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    handleClose() {
      this.$refs['form'].resetFields()
      this.dialogVisible = false
    },
    submit(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.add()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleSelectionChange(val) {
      let arr = []
      for (let i = 0; i < val.length; i++) {
        arr.push({
          nbid: val[i].nbid,
        })
      }
      this.multipleSelection = arr
    },
    goAdd() {
      ;(this.form = {
        pbrq: '',
        bz: '',
        bc: '',
        bzxx: '',
      }),
        (this.dialogVisible = true)
    },
    goEdit(e) {
      this.diatitle = '修改'
      this.form = {
        nbid: e.nbid,
        bcfs: e.bcfs,
        zb: [e.zbks, e.zbjs],
        wb: [e.wbks, e.wbjs],
        zban: [e.zbanks, e.zbanjs],
        bzxx: e.bzxx,
      }
      if (e.zbanjs == '00:00:00') {
        this.form.zban = ['12:00:00', '18:00:00']
      }
      this.dialogVisible = true
    },
    async godel() {
      this.$confirm('确定删除所选数据?', '请确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: `正在加载数据`,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          try {
            let postdata = []
            postdata.push({
              tableName: 't_jbxx_pbxx',
              action: 'delete',
              dataList: this.multipleSelection,
            })
            const res = await request({
              url: '/lowcode/commonUpdate',
              method: 'post',
              data: postdata,
            })
            this.getData()
            this.dialogVisible = false
          } catch (e) {
            console.log('Error:', e)
          } finally {
            loading.close()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    async add() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      try {
        let datalist = []
        let postdata = []
        let action = ''
        if (this.form.nbid) {
          action = 'update'
          this.$delete(this.form, 'PAGE_ROW_NUMBER')
          this.$delete(this.form, 'newsj')
        } else {
          action = 'insert'
        }

        this.$delete(this.form, 'zb')
        this.$delete(this.form, 'zban')
        this.$delete(this.form, 'wb')
        datalist.push(this.form)
        postdata.push({
          tableName: 't_jbxx_pbxx',
          action: action,
          dataList: datalist,
        })
        const res = await request({
          url: '/lowcode/commonUpdate',
          method: 'post',
          data: postdata,
        })
        this.getData()
        this.handleClose()
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.top-wrap {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.spin-status {
  margin-top: 10px;
  height: calc(100vh - 170px);
  width: 100%;
}

.diaform {
  padding: 30px;
}
</style>
